<script setup>
import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
import { ref } from 'vue';
const to= '/pages/work1/nointeamreason'

const toNext = (target) =>{
  uni.navigateTo({
    url:target
  })
}

const applicationList = [
  {
    name: '张小玲',
    studentId: '20232023',
    college: '艺术学院',
    major: '艺术设计',
    phone: '15888888888',
    applyTime: '2023-03-29 23:59:59',
    reason: '一中校友，期望加入'
  },
  {
    name: '王金金',
    studentId: '20232023',
    college: '商学院',
    major: '营销管理',
    phone: '15888888888',
    applyTime: '2023-03-29 23:59:59',
    reason: '一中校友，期望加入'
  }
];
const tabs = ['待审批', '同意入队', '不同意入队'];
const index = ref(0);
const tabchange=(value)=>{
  console.info(value)
  index.value=value
}
</script>

<template>
  <view class="container">
    <!-- 顶部选项卡 -->
    <liuyuno-tabs @tabClick="tabchange" :tabindex="index" :tabData="tabs" />

    <!-- 申请列表 -->
    <view class="application-list">
      <view v-if="index==0" class="application-item" v-for="(app, index1) in applicationList" :key="index1">


        <view class="user-info">
          <text class="user-name">{{ app.name }} </text>
          <text class="student-id">工号：{{ app.studentId }}</text>
          <text class="college">学院：{{ app.college }}</text>
          <text class="major">专业：{{ app.major }}</text>
          <text class="phone">联系电话：<text class="phone-number">{{ app.phone }}</text></text>
          <text class="apply-time">申请时间：{{ app.applyTime }}</text>
          <text class="reason">入队理由：{{ app.reason }}</text>
        </view>
        <view class="action-buttons">
          <button class="agree-button">同意入队</button>
          <button class="disagree-button" @click="toNext(to)">不同意入队</button>
        </view>
      </view>
      <view v-else-if="index==1"class="container1">
        <view class="user-info">
          <text class="user-name">张小玲</text>
          <text class="student-id">工号：20232023</text>
          <text class="college">学院：艺术学院</text>
          <text class="major">专业：艺术设计</text>
          <text class="phone">联系电话：15888888888</text>
          <text class="apply-time">申请时间：2023-03-29 23:59:59</text>
          <text class="reason">入队理由：中校友，期望加入</text>
          <text >审批通过时间：2023-03-29 23:59:59</text>
        </view>
      </view>
      <view v-else-if="index==2">
        <view class="user-info">
          <text class="user-name">王金金</text>
          <text class="student-id">工号：20232023</text>
          <text class="college">学院：艺术学院</text>
          <text class="major">专业：艺术设计</text>
          <text class="phone">联系电话：15888888888</text>
          <text class="apply-time">申请时间：2023-03-29 23:59:59</text>
          <text class="reason">入队理由：中校友，期望加入</text>
          <text >审批通过时间：2023-03-29 23:59:59</text>
        </view>
      </view>
      </view>
    </view>

</template>

<style scoped>

.container {
  background-color: #F5F5F5;
  padding: 10px;
}

.application-list {
  margin-top: 10px;
}

.application-item {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.user-info text {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.action-buttons {
  display: flex;
  margin-top: 10px;
}

.agree-button {
  flex: 1;
  background-color: #007AFF;
  color: #FFFFFF;
  padding: 10px;
  border: none;
  border-radius: 4px;
  margin-right: 10px;
}

.disagree-button {
  flex: 1;
  background-color: #FF9500;
  color: #FFFFFF;
  padding: 10px;
  border: none;
  border-radius: 4px;
}
</style>